<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/static/xadmin/css/font.css">
    <link rel="stylesheet" href="/static/xadmin/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/apublic.css">
    <script src="/static/xadmin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/xadmin/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="/static/xadmin/html5.min.js"></script>
    <script src="/static/xadmin/respond.min.js"></script>
    <![endif]-->
    <script src="/static/until.js" charset="utf-8"></script>
    <script src="/static/vue.js" charset="utf-8"></script>
    <script>
        if(!sessionStorage.getItem('token')) window.top.location.href='/login.html';
    </script>
    <style>
        body{
            background:#fff;
        }
        [v-cloak] {
            display: none !important;
        }
        .layui-icon-close{
            cursor:pointer;
        }
        .layui-icon-close:hover{
            color:red;
        }
        .title{
            font-size:16px;
            font-weight: bold;
        }
        .item{
            margin-bottom:15px;
        }
        .item .content>p{
            margin-top:10px;
        }
        .baseinfo .content{
            display:flex;
        }
        .baseinfo .content{
            display:flex;
            flex-wrap: wrap;
        }
        .baseinfo .content>p{
            width:50%;
        }
        .list-image{
            display:flex;
            flex-wrap: wrap;
        }
        .list-image img{
            margin-right:5px;
            margin-top:10px;
            width:49%;
        }
        .xq{
            margin-top:10px;
        }
        .gg>div{
            display:flex;
        }
        .gg>div>span{
            width:10%;
        }
    </style>
</head>
<body>
<div v-cloak class="layui-fluid" id="app">
    <div class="layui-row">
        
        <div class="item baseinfo" v-if="info">
            <p class="title">基础信息</p>
            <div class="content">
                <p>标题：{{info.title}}</p>
                <p>ID：{{info.id}}</p>
                <p>单价：{{info.price?info.price.toFixed(2):'0.00'}}</p>
                <p>库存：{{info.num}}</p>
                <p>状态：{{info.status==1?'编辑':'发布'}}</p>
                <p>创建时间：{{info.create_at}}</p>
                <p>更新时间：{{info.update_at}}</p>
            </div>
        </div>
        <div class="item">
            <p class="title">规格</p>
            <div class="content gg">
                <div><span>标题</span>
                    <span>价格</span>
                    <span>库存</span></div>
                <div v-for="item in info.goods_spec">
                    <span>{{item.title}}</span>
                    <span>{{item.price.toFixed(2)}}</span>
                    <span>{{item.num}}</span>
                </div>
            </div>
        </div>
        <div class="item">
            <p class="title">店铺信息</p>
            <div class="content">
                <p>名称： {{info.store?info.store.title:'-'}}</p>
                <p>地址： {{info.store?info.store.address:'-'}}</p>
            </div>
        </div>
        <div class="item">
            <p class="title">详情</p>
            <div class="xq">
                {{info.goods_content?info.goods_content.content:''}}
            </div>
        </div>
        <div class="item">
            <p class="title">图片</p>
            <div class="list-image">
                <img :src="item.image" v-for="item in info.goods_image"/>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['layer','jquery'],
        function() {
            $ = layui.jquery;
            var app = new Vue({
                el: '#app',
                data: {
                    detail_url:"/goods/detail",
                    info:{}
                },
                created:function(){
                    var that=this
                    u_post(this.detail_url,{id:getQueryString("id")},function(res){
                        if(res.status.errorCode==0) {
                            that.info=res.data
                            that.info.create_at=utc2datetime(that.info.create_at)
                            that.info.update_at=utc2datetime(that.info.update_at)
                        }
                        else{
                            layer.alert(res.status.msg, {icon: 5})
                        }
                    });
                }
            }) 

        })
 
    
</script>
</body>

</html>
